package com.piepesken.mediscale.ui.overview

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Scale
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.navigation.NavController
import com.google.accompanist.pager.ExperimentalPagerApi
import com.google.accompanist.pager.HorizontalPager
import com.huaweicloud.sdk.iotda.v5.model.QueryDeviceSimplify
import com.piepesken.mediscale.R
import com.piepesken.mediscale.viewmodels.ScaleViewModel

@OptIn(ExperimentalMaterial3Api::class)
@ExperimentalPagerApi
@Composable
fun ChooseScaleScreen(
    navController: NavController
) {
    val viewModel: ScaleViewModel = hiltViewModel()
    val devices: List<QueryDeviceSimplify> by viewModel.devices.collectAsState(initial = emptyList())

    // TODO: 使用状态表示。
    if (devices.isEmpty()) {
        Column (
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            CircularProgressIndicator()
        }
    }

    LargeTopAppBar(
        title = {
            Text(
                text = stringResource(id = R.string.chooseScale),
                fontSize = MaterialTheme.typography.displaySmall.fontSize,
                fontWeight = MaterialTheme.typography.displaySmall.fontWeight,
                fontStyle = MaterialTheme.typography.displaySmall.fontStyle
            )
        }
    )

    Column (
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        HorizontalPager(count = devices.size) { page ->
            // Our page content
            Column (
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Box(
                    modifier = Modifier
                        .size(320.dp)
                        .clip(CircleShape)
                        .background(MaterialTheme.colorScheme.primaryContainer)
                        .clickable {
                            navController.navigate(
                                "weigh/${devices[page].deviceId}"
                            )
                        },
                    contentAlignment = Alignment.Center
                ) {
                    Icon(
                        modifier = Modifier.size(160.dp),
                        imageVector = Icons.Filled.Scale,
                        contentDescription = "Scale"
                    )
                }

                Spacer(modifier = Modifier.size(20.dp))

                Text(
                    text = devices[page].productName,
                    lineHeight = MaterialTheme.typography.headlineMedium.lineHeight,
                    fontSize = MaterialTheme.typography.headlineMedium.fontSize,
                    fontWeight = MaterialTheme.typography.headlineMedium.fontWeight,
                    fontStyle = MaterialTheme.typography.headlineMedium.fontStyle
                )

                Spacer(modifier = Modifier.size(8.dp))


                Text(
                    color = Color.Gray,
                    text = devices[page].deviceId,
                    lineHeight = MaterialTheme.typography.labelSmall.lineHeight,
                    fontSize = MaterialTheme.typography.labelSmall.fontSize,
                    fontWeight = MaterialTheme.typography.labelSmall.fontWeight,
                    fontStyle = MaterialTheme.typography.labelSmall.fontStyle
                )
            }
        }
    }
}